<template>
    <v-app id="inspire" >
        <v-content>
            <v-container fluid fill-height>
                <v-layout align-center justify-center xs12 sm8 md4>
                    <v-card class="elevation-12">
                        <v-toolbar dark color="primary">
                            <v-toolbar-title>登录</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field
                                    v-model="user.email"
                                    prepend-icon="person" 
                                    name="email" 
                                    label="邮箱" 
                                    type="text"
                                    required
                                    :error-messages="emailErrors"
                                    @inpout="$v.user.email.$touch()"
                                    @blur="$v.user.email.$touch()"
                                >
                                </v-text-field>
                                <v-text-field
                                    prepend-icon="lock" 
                                    name="password" 
                                    label="密码"
                                    v-model="user.password"
                                    required
                                    :error-messages="passwordErrors"
                                    @blur="$v.user.password.$touch()"
                                >
                                </v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="primary" @click="login">登录</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-layout>
            </v-container>

            <v-snackbar v-model="errorDialogs" top>
                {{errorDialogsText}}
                <v-btn flat @click="errorDialogs = false">关闭</v-btn>
            </v-snackbar>
        </v-content>
    </v-app>
</template>

<script>
import { required, maxLength, email } from 'vuelidate/lib/validators'
import { mapActions } from 'vuex'

    export default {
        name: 'Login',
        data() {
            return {
                user: {
                    email: '',
                    password: ''
                },
                errorDialogs: false,
                errorDialogsText: ''
            }
        },
        computed: {
            emailErrors() {
                let errors = []
                if(!this.$v.user.email.$dirty) return errors
                !this.$v.user.email.required && errors.push('邮箱不能为空')
                !this.$v.user.email.email && errors.push('邮箱格式不正确')
                return errors 
            },
            passwordErrors() {
                let errors = []
                if(!this.$v.user.password.$dirty) return errors
                !this.$v.user.password.required && errors.push('密码不能为空')
                return errors
            }
        },
        validations: {
            user: {
                email: {
                    required,
                    email
                },
                password: {
                    required
                }
            }
            
        },
        methods: {
            ...mapActions({
                register: 'user/register'
            }),
            login() {
                let _this = this
                _this.$v.$touch
                if(!_this.$v.$invalid){
                    _this.register(_this.user).then(() => {
                        _this.$router.push({name: 'Main'})
                    })
                }else{
                    _this.errorDialogsText = '登录信息有误，请修正后再试'
                    _this.errorDialogs = true
                }
                
            }
        },
    }
</script>

<style scoped>
.elevation-12{
    width: 600px;
}
</style>